<template>
	<div class="section" ref="parent">
		<div class="border-row"></div>
		<div class="border-col"></div>
		<div class="section-header">驻温高校毕业生性别人数分布</div>
		<div style="position: relative" v-show="jz">
			<div class="tips">
				男生
				<span class="value">{{chartsData.total.ManNum}}</span>
				人， 女生
				<span class="value">{{chartsData.total.WomanNum}}</span>
				人
				<br />
				分别占毕业总数的
				<span class="value">{{(Number(chartsData.total.ManNum)/(Number(chartsData.total.ManNum) + Number(chartsData.total.WomanNum))*100).toFixed(2) + '%'}}</span>
				和
				<span class="value">{{(Number(chartsData.total.WomanNum)/(Number(chartsData.total.ManNum) + Number(chartsData.total.WomanNum))*100).toFixed(2) + '%'}}</span>
			</div>
			<div ref="charts" :style="chartsDom"></div>
		</div>
		
             <animae-jz   :style="chartsDom" v-if="!jz"></animae-jz>
	</div>
</template>
<script>
import { getSexOfGraduates } from '@/api/data'

export default {
	props: ['height', 'dateProp'],
	data() {
		return {
			chartsDom: null,
			jz:true,
			chartsData: {
				total:{ManNum: "0", WomanNum: "0"},
				edu: [
					{name: "专科", value: [{name: "男", value: "0"}, {name: "女", value: "0"}]},
					{name: "本科", value: [{name: "男", value: "0"}, {name: "女", value: "0"}]},
					{name: "硕士", value: [{name: "男", value: "0"}, {name: "女", value: "0"}]},
					{name: "博士", value: [{name: "男", value: "0"}, {name: "女", value: "0"}]}
				],
			}
		};
	},
	computed: {
		setStyle: {
			get() {
				return this.$refs.parent.offsetWidth;
			},
			set(val) {
				this.chartsDom = {
					width: val - 30 + 'px',
					height: this.height - 30 - 31 + 'px',
					'z-index': 100,
					position: 'relative'
					// 'background-color': 'red'
				};
			}
		}
	},
	mounted() {
		this.setStyle = this.setStyle;
		this.$nextTick(_ => {
			this.init();
		});
	},
	methods: {
		init() {
			this.jz=false
			console.log(this.dateProp)
			getSexOfGraduates(this.dateProp).then(({ data: { data } }) => {
				console.log(data);
				this.jz=true
				if (data && data.total.ManNum) {
					this.chartsData = data;
				}else{
					this.chartsData = {
						total:{ManNum: "0", WomanNum: "0"},
						edu: [
							{name: "专科", value: [{name: "男", value: "0"}, {name: "女", value: "0"}]},
							{name: "本科", value: [{name: "男", value: "0"}, {name: "女", value: "0"}]},
							{name: "硕士", value: [{name: "男", value: "0"}, {name: "女", value: "0"}]},
							{name: "博士", value: [{name: "男", value: "0"}, {name: "女", value: "0"}]}
						],
					}
				}
				this.chartInit();
			});
		},
		chartInit() {
			var manArray = new Array();

			manArray.push(this.chartsData.edu[0].value[0].value);
			manArray.push(this.chartsData.edu[1].value[0].value);
			manArray.push(this.chartsData.edu[2].value[0].value);
			manArray.push(this.chartsData.edu[3].value[0].value);
			
			var womanArray = new Array();
			womanArray.push(this.chartsData.edu[0].value[1].value);
			womanArray.push(this.chartsData.edu[1].value[1].value);
			womanArray.push(this.chartsData.edu[2].value[1].value);
			womanArray.push(this.chartsData.edu[3].value[1].value);

			let option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						// 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				legend: {
					data: ['男', '女'],
					top: 90,
					right: 30,
					textStyle: {
						color: '#8ebafb'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					top: '30%',
					containLabel: true
				},
				xAxis: [
					{
						type: 'value',
						axisTick: {
							alignWithLabel: true
						},
						splitLine: {
							show: false
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: 'rgba(255,255,255,.3)'
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							textStyle: {
								color: '#8ebafb'
							}
						}
					}
				],
				yAxis: [
					{
						type: 'category',
						data: ['专科', '本科', '硕士', '博士'],
						splitLine: {
							show: false
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: 'rgba(255,255,255,.3)'
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							textStyle: {
								color: '#8ebafb'
							}
						}
					}
				],
				series: [
					{
						name: '男',
						type: 'bar',
						stack: '广告',
						data: manArray,
						itemStyle: {},
						barWidth: 20
					},
					{
						name: '女',
						type: 'bar',
						stack: '广告',
						data: womanArray,
						itemStyle: {},
						barWidth: 20
					}
				],
				color: ['#37a2da', '#ffdb5c']
			};
			let chart = this.$echarts.init(this.$refs.charts);
			chart.setOption(option);
		}
	}
};
</script>
<style lang="stylus" scoped>
.section
	width 100%
	height 100%
	margin-top 20px
.tips
	position absolute
	width 100%
	height auto
	z-index 100
	text-align center
	font-size 16px
	color #ffffff
	line-height 28px
	margin 15px 0
	.value
		color #8ebafb
		font-weight bold
</style>
